<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>客户管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		fieldset{
			display:inline-block;width:100%;
		} 
	</style>
	
</head>
<body>
	<form:form id="inputForm" class="form-input"  modelAttribute="customer" action="${ctx}/base/customer/save" method="post">
		<form:hidden path="id"/>
		<form:hidden path="store.id" value="${fns:getStore().id}"/>
		<input type="hidden" id="target" name="target"  value="${target}"/>
		<div class="icon-buttons">
			<c:if test="${not empty target}">
		      		<a href="${ctx}/${target}/" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
			</c:if>
			<c:if test="${empty target}">
				<c:if test="${empty customer.id}">
		      		<a href="${ctx}/base/customer/" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
				</c:if>
				<c:if test="${not empty customer.id}">
		      		<a href="${ctx}/base/customer/detail?id=${customer.id}" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
				</c:if>
			</c:if>
			<input id="btnSubmit" type="submit" data-icon="check" data-iconpos="notext" value="保 存" data-inline="true"/>
		</div>
		<tags:message content="${message}"/>
		<div data-role="collapsible" data-collapsed="false" >
		    <h5>必填信息</h5>
			<div data-role="fieldcontain">
	   			<label for="name">姓名:</label>
	    		<form:input path="name" class="required" />
			</div>
			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
					<legend>性别:</legend>
					<form:radiobuttons path="gender" items="${fns:getDictMap('gender')}"/>
				</fieldset>
			</div>
			<div data-role="fieldcontain">
				<label for="mobile">手机:</label>
				<form:input type="tel" path="mobile" htmlEscape="false" maxlength="11" class="required"/>
			</div>
			<div data-role="fieldcontain">
				<label for="birthday">生日:</label>
				<form:input type="date" path="birthday" value="${customer.birthday}" class="required"/>
			</div>
		</div>
		<div data-role="collapsible" data-collapsed="false" >
		    <h5>选填信息</h5>
			<div data-role="fieldcontain">
	   			<label for="nickname">备注名:</label>
	   			<form:input path="nickname"/>
			</div>
			<div data-role="fieldcontain">
				<label for="personalEmployee">美容师:</label>
				<select multiple="multiple" id="personalEmployee" name="personalEmployee" data-native-menu="false">
					<option>选择美容师</option>
					<c:forEach items="${ceList}" var="ce">
						<option value="${ce.employee.id}" selected>${ce.employee.name}</option>
					</c:forEach>
					<c:forEach items="${otherList}" var="e">
						<option value="${e.key}">${e.value}</option>
					</c:forEach>
				</select>
			</div>
			<div data-role="fieldcontain">
				<label for="selectEmployee">已选择的美容师:</label>
				<div id="selectEmployee" data-inline="true">
					<c:if test="${not empty ceList}">
						<c:forEach items="${ceList}" var="ce">
							<label>
								${ce.employee.name}
							</label>,
						</c:forEach>
					</c:if>
				</div>
			</div>
			<div data-role="fieldcontain">
				<label for="weight">体重(千克):</label>
				<form:input type="number" path="weight" htmlEscape="false" maxlength="4"/>
			</div>
			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal">
					<legend>婚姻状况:</legend>
					<form:radiobuttons path="marry" items="${fns:getDictMap('marry')}"/>
				</fieldset>
			</div>
			<div data-role="fieldcontain">
				<label for="childs">子女（个）:</label>
				<form:input type="number" min="0" path="childs" maxlength="1" htmlEscape="false" class="digits"/>
			</div>
			<div data-role="fieldcontain">
				<label for="phone">固定电话:</label>
				<form:input type="tel" path="phone" htmlEscape="false" maxlength="11" class="number"/>
			</div>
			<div data-role="fieldcontain">
				<label for="live_condition">居住环境:</label>
				<form:select path="live_condition" data-native-menu="false" items="${fns:getDictMap('live_condition')}"></form:select>
			</div>
			<div data-role="fieldcontain">
				<label for="workplace">工作场所:</label>
				<form:select path="workplace" data-native-menu="false" items="${fns:getDictMap('workplace')}"></form:select>
			</div>
			<div data-role="fieldcontain">
				<label for="email">邮箱:</label>
				<form:input type="email" path="email" htmlEscape="false" maxlength="32" class="email"/>
			</div>
			<div data-role="fieldcontain">
				<label for="work_nature">工作性质:</label>
				<form:input id="work_nature" path="work_nature" htmlEscape="false" maxlength="64"/>
			</div>
			<div data-role="fieldcontain">
				<label for="address">住址:</label>
				<form:textarea path="address" htmlEscape="false"/>
			</div>
		</div>
	</form:form>
<script type="text/javascript">
		$(document).ready(function() {
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var mobile = $("#mobile").val();
					jQuery.ajax({  
						  url:"isExist",
					      type:"post",
					      data: {
					         id : function() {   
	                            return "${customer.id}";   
	                         },
						 	 mobile: function() {   
	                            return mobile;   
	                         }
					      },  
				          success : function(data) {
					          if (data == 'true') {
									 loading('正在提交，请稍等...');
									 form.submit();
						          }else{
						        		var jsonData = $.parseJSON(data);
						        		var len = jsonData.length;
						        		var msg = "该手机号码(" + mobile + ")已被如下客户所注册使用：<br/> ";
						        		var storeId;
										for (var i = 0; i < len; i++) {
											var node = jsonData[i];
											var sid = node.storeId;
											var nickname = "";
											if (node.nickName) {
												nickname = "(备注名：" + node.nickName + ")";
											}
											if (storeId == sid){
												msg += "客户：" + node.name + nickname + "<br/>";
											} else {
												storeId = sid;
												msg =  msg + "<br/>【" +node.storeName + "】(" + node.areaName + ")<br/><hr/>";
												msg += "客户：" + node.name + "(备注名：" + node.nickName + ")<br/>";
											}
										}
										msg = msg + "<br/>请您再次核对输入的手机号码是否正确！";
										global.alert(msg);
							       };
				          },  
				          error : function(data) {  
				             showTip("操作失败");
				          }  
				    	}); 
				},
				focusInvalid:false,
				rules:{
	                "mobile": {
						isMobile: "#mobile"
	                }
	            },
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				},
				messages: {
					weight:"格式有误！",
					email:"格式有误！",
					mobile:"手机号码格式有误！"
				}
			});
			$("#personalEmployee").change(function(){
				var sel = "";
				$("#personalEmployee").find("option").each(function(id,op){
					if (op.selected) {
						sel += op.text +", ";
						}
				 });  
				$("#selectEmployee").html(sel);
			});
		});
	</script>
</body>
</html>
